<template>
  <el-container class="window-box">
    <!--左边容器 -->
    <el-aside class="aside">
      <Aside></Aside>
    </el-aside>
    <!-- 右边容器 -->
  <el-container>
      <div class="resize-container"></div>
      <el-main class="main">
        <main_header />
        <main_content />
        <el-backtop target=".main"></el-backtop>
      </el-main>
  </el-container>
</el-container>
</template>

<script>
import Aside from './aside'
import main_header from './main-header'
import main_content from './main-content'
export default {
  components:{
    Aside,main_header,main_content
  },
  mounted(){
    this.dragControllerDiv();
  },
  methods:{
    //重置大小
    dragControllerDiv: function () {
      var resize = document.getElementsByClassName('resize-container');
      var left = document.getElementsByClassName('aside');
      var mid = document.getElementsByClassName('main');
      var box = document.getElementsByClassName('window-box');
      for (let i = 0; i < resize.length; i++) {
        // 鼠标按下事件
        resize[i].onmousedown = function (e) {
          //颜色改变提醒
          var startX = e.clientX;
          resize[i].left = resize[i].offsetLeft;
          // 鼠标拖动事件
          document.onmousemove = function (e) {
              var endX = e.clientX;
              var moveLen = resize[i].left + (endX - startX); // （endx-startx）=移动的距离。resize[i].left+移动的距离=左边区域最后的宽度
              var maxT = box[i].clientWidth - resize[i].offsetWidth; // 容器宽度 - 左边区域的宽度 = 右边区域的宽度

              if (moveLen < 300) moveLen = 300; //左边区域的最小宽度为300px

              if (moveLen > 500) moveLen = 500; //左边区域的最大宽度为500px

              resize[i].style.left = moveLen; // 设置左侧区域的宽度

              for (let j = 0; j < left.length; j++) {
                  left[j].style.width = moveLen + 'px';
                  mid[j].style.width = (box[i].clientWidth - moveLen - 10) + 'px';
              }
          };
          // 鼠标松开事件
          document.onmouseup = function (evt) {
              //颜色恢复
              document.onmousemove = null;
              document.onmouseup = null;
              resize[i].releaseCapture && resize[i].releaseCapture(); //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
          };
          resize[i].setCapture && resize[i].setCapture(); //该函数在属于当前线程的指定窗口里设置鼠标捕获
          return false;
        };
      }
    }
  }
}
</script>
<style scoped>
  .resize-container:hover{
    cursor: w-resize;
  }
  .resize-container::after {
    content: "";
    display: inline-block;
    width: 2px;
    height: 20px;
    border-left: 1px solid rgba(0, 0, 0, 0.2);
    border-right: 1px solid rgba(0, 0, 0, 0.2);
    position: relative;
    top: 50%;
  }
  .window-box{
      width: 100%;
      height: 100%;
      position: fixed;
  }
  .el-main{
    padding: 0px;
  }
  .aside{
    border-right: 1px solid #E4E0E0;
    margin:5px;
    overflow-y: overlay;
  }
  .aside::-webkit-scrollbar,.main::-webkit-scrollbar{
    /*滚动条整体样式*/
    width : 5px;  /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
  }
  .aside::-webkit-scrollbar-thumb,.main::-webkit-scrollbar-thumb{
    /*滚动条里面小方块*/
    border-radius   : 10px;
    background-color: skyblue;
    background-image: -webkit-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.2) 75%,
    transparent 75%, 
    transparent);
  }
  .aside::-webkit-scrollbar-track,.main::-webkit-scrollbar-track{
    /*滚动条里面轨道*/
    box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
    background   : #ededed;
    border-radius: 10px;
  }
</style>